<template>
  <view class="square-container"
  :class="{selectedStyle:props.selected,unselectedStyle:!props.selected}">
	  <image src="../../static/选择（已选择）.png" 
	  mode="aspectFit" v-show="props.selected" class="icon"></image>
	  <image src="../../static/选择（未选择）.png" 
	  mode="aspectFit" v-show="!props.selected" class="icon"></image>
  </view>
</template>

<script setup>
import { ref } from 'vue';
// 定义用于区分是否选中的变量
const props = defineProps({
	selected:{
		type:Boolean,
		default(){
			return false;
		},
	},
})
</script>

<style scoped>
.icon{
	width: 50rpx;
	height: 50rpx;
}
.selectedStyle{
	background-color: rgb(243, 243, 243);
}
.unselectedStyle{
	background-color: white;
}
.square-container {
	position: absolute;
	left: 0;
	width: 120rpx;
	height: 120rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

</style>